<template>
  <div>
    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">
        <!-- 添加资产 -->
        <form class="my-form">
          <input type="text" v-Myfocus v-model.trim="consumptionName" class="form-control" placeholder="消费名称">
          <input
            type="text"
            v-model.number="consumptionPrice"
            class="form-control"
            placeholder="消费价格"
          >
          <button type="button" class="btn btn-primary" @click="add">添加账单</button>
        </form>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>
              <th>消费名称</th>
              <th>消费价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in listData" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{item.price.toFixed(2)}}</td>
              <td>
                <a href="javascript:;" @click="remove(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计：{{totalPrice.toFixed(2)}}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- 右侧图表 -->
      <div v-loading="loading1" class="echarts-box " id="main"></div>
    </div>
    <div @click="bus">🚌</div>
  </div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
import eventBus from '@/utils/eventBus.js'
export default {
  name: "AccountList",
  directives:{
    loading:{
      inserted(el,binding){
       binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
      update(el,binding){
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      }
    }
  },
  data() {
    return {
      listData: [],
      consumptionName: "",
      consumptionPrice: "",
      loading1:true,
    };
  },
  created() {
    this.request();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("main"));
    this.myChart.setOption({
      title: {
        text: "消费账单列表",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      // 图例
      legend: {
        orient: "vertical",
        left: "left"
      },
      xAxis: {
        data: ["A", "B", "C", "D", "E"]
      },
      yAxis: {},
      // 数据项
      series: [
        {
          type: "bar",
          data: [],
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 1,
            borderType: "solid",
            borderColor: "#73c0de",
            shadowColor: "#5470c6",
            shadowBlur: 3
          }
        }
      ]
    });
  },
  computed: {
    totalPrice() {
      return this.listData.reduce((sum, item) => {
        return sum + item.price;
      }, 0);
    }
  },
  methods: {
    bus(){
      console.log('11');
      eventBus.$emit('buss','巴士')
    },
    async request() {
      await axios
        .get("https://applet-base-api-t.itheima.net/bill", {
          params: {
            creator: "张飞"
          }
        })
        .then(res => {
          setTimeout(()=>{
            this.listData = res.data.data;
            // 更新图表
            this.myChart.setOption({
              // 数据项
              xAxis: {
                data: this.listData.map(item => item.name)
              },
              series: [
                {
                  data: this.listData.map(item => {
                    if (item.price > 500) {
                      return {
                        value: item.price,
                        // 设置单个柱子的样式
                        itemStyle: {
                          color: "red",
                          shadowColor: "#91cc75",
                          borderType: "dashed",
                          opacity: 0.5
                        }
                      };
                    }
                    return item.price
                  })
                }
              ]
            });
          this.loading1 = false
          },1000)
        });
    },
    async add() {
      await axios
        .post("https://applet-base-api-t.itheima.net/bill", {
          creator: "张飞",
          name: this.consumptionName,
          price: this.consumptionPrice
        })
        .then(res => {
          if (res.status == 200) {
            this.request();
            this.consumptionName = "";
            this.consumptionPrice = "";
          }
        });
    },
    async remove(id) {
      await axios
        .delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
        .then(res => {
          if (res.status == 200) {
            this.request();
          }
        });
    }
  }
};
</script>
<style scoped>
.loading::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #fff url('@/assets/shoppingCarImg/loading.gif') no-repeat center;
}
.red {
  color: red !important;
}
.search {
  width: 300px;
  margin: 20px 0;
}
.my-form {
  display: flex;
  margin: 20px 0;
}
.my-form input {
  flex: 1;
  margin-right: 20px;
}
.table > :not(:first-child) {
  border-top: none;
}
.contain {
  display: flex;
  padding: 10px;
}
.list-box {
  flex: 1;
  padding: 0 30px;
}
.list-box a {
  text-decoration: none;
}
.echarts-box {
  width: 600px;
  height: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
tfoot {
  font-weight: bold;
}
@media screen and (max-width: 1000px) {
  .contain {
    flex-wrap: wrap;
  }
  .list-box {
    width: 100%;
  }
  .echarts-box {
    margin-top: 30px;
  }
}
</style>


